<html>
<head >
<meta charset="utf-8" >
<meta http-equiv="content-type" content="text/html" >
<meta   HTTP-EQUIV="Pragma"   CONTENT="no-cache"> 
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"   />

<title>登录</title>

<link rel="stylesheet" type="text/css" href="./css/css.css"/>
<link rel="stylesheet" type="text/css" href="./css/login.css"/>
<!--
<link rel="stylesheet" href="../styles/font/iconfont.css">
-->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1751364_8iw9perr8hh.css">

    <link rel="stylesheet" href="./js/intlTelInput/build/css/intlTelInput.css">
    <link rel="stylesheet" href="./js/intlTelInput/build/css/demo.css">
    <link rel="stylesheet" href="./js/captcha/jquery.idcode.css">
</head >


<body id="login">
    <header>
        <div class="block-header">
            <div class="item-logo">
                <img src="./images/51logo-login.png"  class="item-logo-img">
            </div>
            <div class="item-logofont">
                <img src="./images/login-font.png"  class="item-logofont-img">
            </div>
        </div>
    </header>
   
    <!-- 表单提交 -->
    <div class="block">
        <form id="form" class="form-login">
            <div class="item">
                <div class="item-code"><label for="code"><input id="code" class="item-input  "  placeholder="+86" name="" value="+86"  ></label></div>
                <div class="item-icon-div item-phone"><label for="phone"><i class="iconfont  item-icon-i iconuser"></i><input id="phone" class="item-input item-icon-input" type="text" placeholder="手机号码" name="" ></label></div>
            </div>
            <div class="item">
                <div class="item-icon-div item-regcode"><label for="regcode"><i class="iconfont item-icon-i iconlockopen"></i><input id="catcode" class="item-input item-icon-input" type="text" placeholder="请输入图形验证码" name="" ></label></div>
                <div class="item-regcode-images">
                    <!-- 验证码 -->
                    <div id="idcode" class="item-regcode-img"></div>

                    <!--
                    验证方法
                 <button type="button" id="btns">验证</button>
                 -->
                 <!--
                 <a href="javascript:void(0)"><img src="./images/regcode.png"  class="item-regcode-img"></a>
-->

                </div>
            </div>
            <div class="item">
                <div class="item-icon-div item-regcode"><label for="regcode"><i class="iconfont item-icon-i iconlockopen"></i><input id="regcode" class="item-input item-icon-input" type="text" placeholder="请输入收到的验证码" name="" ></label></div>
                <div class="item-regcode-images">
                    <a href="javascript:void(0)" class="get-sm-code" id="getCode"><span class="sm-code-text" id="getCodeText">获取验证码</span></a>
                </div>
            </div>
            <div>
                <button class="login-btn" type="submit">登录</button>
            </div>
        </form>
    </div>
      <!-- 表单提交 -->

    <footer>
        <div>
            登陆注册即视为同意<a href="#" class="agree">《51会场用户协议》</a><a href="#" class="agree">《隐私保护政策》</a>
        </div>
    </footer>
</body>
</html>

<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/intlTelInput/build/js/intlTelInput.js"></script>
<script>
    $("#code").intlTelInput({
        // allowDropdown: false,
        // autoHideDialCode: false,
        // autoPlaceholder: "off",
        // dropdownContainer: "body",
        // excludeCountries: ["us"],
        // formatOnDisplay: false,
        // geoIpLookup: function(callback) {
        //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
        //     var countryCode = (resp && resp.country) ? resp.country : "";
        //     callback(countryCode);
        //   });
        // },
        // initialCountry: "auto",
        // nationalMode: false,
        onlyCountries: ['cn','us', 'gb', 'ch', 'ca', 'do'],
        // placeholderNumberType: "MOBILE",
         preferredCountries: ['cn', 'jp'],
        // separateDialCode: true,
        utilsScript: "./js/intlTelInput/build/js/utils.js",
        countrychange:function () {

        }
    });
    $("#code").on("countrychange", function(e, countryData) {
        console.log(countryData)

        $(this).val('+'+countryData.dialCode)
    })
</script>


<!-- 图片验证码  -->
<script type="text/javascript" src="./js/captcha/jquery.idcode.js" ></script>
<script>
    $.idcode.setCode();

    $("#btns").click(function (){
        var IsBy = $.idcode.validateCode();
        alert(IsBy);
        console.log(IsBy);
    });
</script>

<!---->
<script>
    $('#getCode').on('click',function(){
        var that = $("#getCodeText")
        var timeo = 60;
        var timeStop = setInterval(function(){
            timeo--;
            if (timeo>0) {
                that.text(timeo +'s'+'重送' );
                that.attr('disabled','disabled');//禁止点击
            }else{
                timeo = 60;//当减到0时赋值为60
                that.text('获取验证码');
                clearInterval(timeStop);//清除定时器
                that.removeAttr('disabled');//移除属性，可点击
            }
        },1000)
    })
</script>

